import React, { useState } from "react";
import ProForm, { ProFormText, ProFormDatePicker, ProFormTextArea, ProFormSelect } from "@ant-design/pro-form";
import MusicAPI from '@/services/ant-design-pro/music';
import { Modal, message, Image, Space } from 'antd'
import { ArrowRightOutlined } from '@ant-design/icons';
import { connect } from 'dva'

import UploadImg from '@/components/UploadImg'
import No_head from '../../../../assets/image/no_head.jpg'
import m_config from '@/config/config'

const { addAlbum, updateAlbum } = MusicAPI
const CreateOrEdit = (props) => {
    const { isModalVisible, isShowModal, actionRef, setData, initData, SingerSelect, dispatch } = props;
    const [imgFile, setImageFile] = useState(undefined);
    const type = initData === undefined ? "添加" : "编辑";
    /**
     * 添加或编辑词作家
     * @param {obj} params 参数
     * @returns 
     */
    const handleSubmit = async (params) => {
        let result;
        if (initData === undefined) { // 添加
            result = await addAlbum(params);
        } else { // 编辑
            if (imgFile === undefined) {
                let i = 0;
                for (let key in params) {
                    if (params[key] == initData[key]) {
                        i++;
                    }
                }
                if (i > 3)
                    return message.error("您还未修改数据")
            }

            result = await updateAlbum({
                album: {
                    // ...initData,
                    ...params,
                    album_id: initData.album_id,
                    album_pic: initData.album_pic,
                    album_pic_name: initData.album_pic_name
                },
                file: imgFile || null
            });
        }

        if (result.status == 'ok') {
            await setData();
            actionRef.current.reload();
            message.success(type + "成功");
            dispatch({
                type: 'music/refreshSelect',
                payload: {
                    key: 'Album',
                    refresh: true
                }
            });
        } else {
            message.error(type + '失败：' + result.data.message);
            console.log(result.data.error);
        }
        isShowModal(false);
    }

    return (
        <Modal
            title={`${type}专辑`}
            footer={false}
            visible={isModalVisible}
            onCancel={() => isShowModal(false)}
            destroyOnClose={true}>
            {
                <ProForm
                    onFinish={(values) => handleSubmit(values)}
                    initialValues={initData}
                >

                    {
                        initData === undefined ? "" :
                            <>
                                <Space size={12}>
                                    <Image
                                        width={150}
                                        src={m_config.local + initData.album_pic + initData.album_pic_name || No_head}
                                        onError={(e) => {
                                            e.target.src = No_head;
                                        }}
                                    />
                                    <ArrowRightOutlined />
                                    <UploadImg setImgFile={(values) => setImageFile(values)} />
                                </Space>
                            </>
                    }
                    <ProFormText
                        name="album_name"
                        label="专辑名称"
                        placeholder="请输入名称"
                        rules={[
                            { required: true, message: "请输入名称" }
                        ]}
                    />

                    {
                        initData === undefined ? "" :
                            <ProFormSelect
                                options={SingerSelect}
                                showSearch
                                style={{ width: 200 }}
                                width="xs"
                                name="singer_id"
                                label="歌手"
                                optionFilterProp="children"
                                filterOption={(input, option) =>
                                    option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                }
                            />
                    }
                    <ProFormDatePicker width="md" name="album_time" label="发行时间" />
                    <ProFormTextArea width="xl" label="专辑简介" name="album_title" />
                </ProForm>
            }
        </Modal>
    );
}

export default connect(({ music }) => ({
    SingerSelect: music.SingerSelect
}))(CreateOrEdit);